<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="100px"
        :rules="formRules"
      >
        <el-form-item label="虚拟币名称" prop="productName">
          <el-input
            v-model="formData.productName"
            placeholder="请输入虚拟币名称"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="市场价" prop="originalPrice">
          <el-input
            v-model="formData.originalPrice"
            placeholder="请输入市场价"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="促销价" prop="promotionPrice">
          <el-input
            v-model="formData.promotionPrice" 
            placeholder="请输入促销价"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="单位" prop="unit">
          <el-input
            v-model="formData.unit"
            placeholder="请输入单位（如：个、枚）"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="虚拟币数量" prop="num">
          <el-input
            v-model="formData.num" 
            placeholder="请输入虚拟币数量"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="赠送数量" prop="goldCoin">
          <el-input
            v-model="formData.goldCoin"
            placeholder="请输入赠送数量"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="商品描述" prop="productDesc">
          <el-input
            v-model="formData.productDesc"
            type="textarea"
            :rows="3"
            placeholder="请输入商品描述"
          />
        </el-form-item>
        
      </el-form>
    </popup>
  </div>
</template>
<script setup>
  import { onMounted, ref, computed, reactive } from 'vue';
  import { update } from '@/apis/product';
  import Popup from '@/components/popup/index.vue';

  const emit = defineEmits(['success', 'close']);
  const formRef = ref(null);
  const popupRef = ref(null);
  const mode = ref('add');
  const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑虚拟币' : '新增虚拟币';
  });
  const formData = reactive({
    id: null,
    productType: 0,
    productName: '', // 商品名称
    originalPrice: 0, // 市场价
    promotionPrice: 0, // 促销价
    unit: '个', // 单位
    num: 1, // 数量
    productDesc: '', // 商品描述
    goldCoin: 0, // 赠送金币数
  });

  const formRules = reactive({
    productName: [
      {
        required: true,
        message: '请输入虚拟币名称',
        trigger: ['blur'],
      },
    ],
    originalPrice: [
      {
        required: true,
        message: '请输入市场价',
        trigger: ['blur'],
      },
    ],
    promotionPrice: [
      {
        required: true,
        message: '请输入促销价',
        trigger: ['blur'],
      },
    ],
    unit: [
      {
        required: true,
        message: '请输入单位',
        trigger: ['blur'],
      },
    ],
    num: [
      {
        required: true,
        message: '请输入虚拟币数量',
        trigger: ['blur'],
      },
    ],
    productDesc: [
      {
        required: true,
        message: '请输入商品描述',
        trigger: ['blur'],
      },
    ],
    goldCoin: [
      {
        required: true,
        message: '请输入赠送数量',
        trigger: ['blur'],
      },
    ],
  });

  const handleSubmit = async () => {
    await formRef.value?.validate();
    await update(formData);
    popupRef.value?.close();
    emit('success', mode.value);
  };

  const open = (type = 'add') => {
    mode.value = type;
    // 如果是新增模式，重置表单数据
    if (type === 'add') {
      Object.assign(formData, {
        id: null,
        productType: 0,
        productName: '',
        originalPrice: 0,
        promotionPrice: 0,
        unit: '个',
        num: 1,
        productDesc: '',
        goldCoin: 0,
      });
    }
    popupRef.value?.open();
  };

  const setFormData = async row => {
    // 直接使用传入的行数据进行回显
    for (const key in formData) {
      if (row[key] != null && row[key] != undefined) {
        formData[key] = row[key];
      }
    }
  };

  const handleClose = () => {
    emit('close');
  };

  defineExpose({
    open,
    setFormData,
  });
</script>

<style scoped lang="scss">
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader :deep() .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader :deep() .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 20px !important;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
</style>